<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入favicon图标 -->
    <link rel="shortcut icon" href="favicon.ico" />
    <script src="js/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
    <script src="js/list.js"></script>
    <link rel="stylesheet" href="css/list.css">
    <title>Document</title>
</head>
<body>
    <div class="page-wrap">
        <header class="page-header">
    
            <nav>
                <h1>CPC | traffic</h1>
                <ul>
                    <li>About Us</li>
                    <li>Contact Us</li>
                    <li id="burger">
                        <!-- <span></span>
                        <span></span>
                        <span></span> -->
                    </li>
                    <h1 id="login">
                        <a href="login.html">LOGIN</a>
                    </h1>
                </ul>

            </nav>
    
            <main>
                <article id="hero-1" style="--i: 5">
                    <div class="hero-info">
                        <h2>道路千万条，安全第一条！</h2>
                        <h1>安全出行</h1>
                        <h3>Safe travel</h3>
                    </div>
                    <div class="hero-image hi-1"></div>
                </article>
    
                <article id="hero-2" style="--i: 4">
                    <div class="hero-info">
                        <h2>安全高于速度，生命高于一切！</h2>
                        <h1>珍爱生命</h1>
                        <h3>Treasure one's life</h3>
                    </div>
                    <div class="hero-image hi-2"></div>
    
                </article>
    
                <article id="hero-3" style="--i: 3">
                    <div class="hero-info">
                        <h2>红灯亮毋忘小驻，绿灯闪莫误前程。</h2>
                        <h1>交通安全</h1>
                        <h3>Traffic Safety</h3>
                    </div>
                    <div class="hero-image hi-3"></div>
    
                </article>
    
                <article id="hero-4" style="--i: 2">
                    <div class="hero-info">
                        <h2>人人文明礼让，路路安全至上。</h2>
                        <h1>文明秩序</h1>
                        <h3>Civilized order</h3>
                    </div>
                    <div class="hero-image hi-4"></div>
    
                </article>
    
                <article id="hero-5" style="--i: 1">
                    <div class="hero-info">
                        <h2>交通法规记在心，天涯海角平安行</h2>
                        <h1>遵守交规</h1>
                        <h3>Abide by traffic rules</h3>
                    </div>
                    <div class="hero-image hi-5"></div>
                </article>
            </main>
    
        </header>

        <section>
            <ul class="level-1">
                <li>
                    <h3>Destinations</h3>
                    <ul class="level-2">
                        <li>
                            <p>Asia</p>
                            <ul class="level-3">
                                <li>Bali</li>
                                <li>Cambodia</li>
                                <li>Georgia</li>
                                <li>India</li>
                                <li>Indonesia</li>
                                <li>Laos</li>
                                <li>Malaysia</li>
                                <li>Maldives</li>
                                <li>Myanmar</li>
                                <li>Philippines</li>
                                <li>Singapore</li>
                                <li>Sri Lanka</li>
                                <li>Thailand</li>
                                <li>Uzbekistan</li>
                                <li>Vietnam</li>
                            </ul>
                        </li>
                        <li>
                            <p>Europe</p>
                            <ul class="level-3">
                                <li>Czech Republic</li>
                                <li>France</li>
                                <li>Georgia</li>
                                <li>Greece</li>
                                <li>Hungary</li>
                                <li>Iceland</li>
                                <li>Italy</li>
                                <li>Malta</li>
                                <li>Netherlands</li>
                                <li>Poland</li>
                                <li>Portugal</li>
                                <li>Spain</li>
                                <li>Turkey</li>
                            </ul>
                        </li>
                        <li>
                            <p>Africa</p>
                            <ul class="level-3">
                                <li>Egypt</li>
                                <li>Maurtius</li>
                                <li>Morocco</li>
                            </ul>
                        </li>
                        <li>
                            <p>Middle East</p>
                            <ul class="level-3">
                                <li>Egypt</li>
                                <li>Jordan</li>
                                <li>Oman</li>
                                <li>Turkey</li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <h3>Travel Tips</h3>
                    <ul>
                        <li>Going on a trip</li>
                        <li>Travel Insurance</li>
                        <li>Working abroad</li>
                        <li>Saving</li>
                        <li>Instagram tips</li>
                    </ul>
                    <p><small>More tips...</small></p>
                </li>
                <li>
                    <h3>Resources</h3>
                    <ul>
                        <li>Personalised travel advice</li>
                        <li>Where we book our travels</li>
                        <li>Become a booking agent</li>
                    </ul>
                    <p><small>More resources...</small></p>
                </li>
                <li>
                    <h3>About Us</h3>
                    <ul>
                        <li>Our story</li>
                        <li>Work with us</li>
                        <li>Instagram</li>
                        <li>YouTube</li>
                    </ul>
                </li>
            </ul>
        </section>
    
    </div>

    <script>
        var burger = document.getElementById("burger");
            var overlay = document.querySelector("section");
            var heroImage = document.querySelector(".hero-image");
            var showMenu = false;
            var del = 3;
            var i = 1;

            let tl = gsap.timeline({
                repeat: -1,
                yoyo: true,
                ease: "expo.out"
            });

            overlay.style.display = "none";

            burger.addEventListener("click", (e) => {
                showMenu = !showMenu;
                if (showMenu) {
                    burger.classList.add("active");
                    overlay.style.display = "block";
                    gsap.to(overlay, 1, {
                        clipPath: "polygon(0% 0%, 100% 0, 100% 100%, 0% 100%)",
                        ease: "expo.in"
                    });
                } else {
                    burger.classList.remove("active");
                    gsap.to(overlay, 1, {
                        clipPath: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)",
                        ease: "expo.out",
                        onComplete: () => (overlay.style.display = "none")
                    });
                }
            });

            gsap.set(["#hero-1 h2, #hero-1 h1, #hero-1 h3"], {
                clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)"
            });

            gsap.set(
                [
                    `#hero-2 h2, #hero-3 h2, #hero-4 h2, #hero-5 h2,
     #hero-2 h1, #hero-3 h1, #hero-4 h1, #hero-5 h1,
     #hero-2 h3, #hero-3 h3, #hero-4 h3, #hero-5 h3`
                ],
                {
                    clipPath: "polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)"
                }
            );

            while (i < 5) {
                tl.to(`#hero-${i} h2`, 0.9, {
                    clipPath: "polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)",
                    delay: del
                })
                    .to(
                        `#hero-${i} h1`,
                        0.9,
                        {
                            clipPath: "polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)"
                        },
                        "-=0.3"
                    )
                    .to(
                        `#hero-${i} h3`,
                        0.9,
                        {
                            clipPath: "polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)"
                        },
                        "-=0.3"
                    )
                    .to(
                        `#hero-${i} .hi-${i}`,
                        0.7,
                        {
                            clipPath: "polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)"
                        },
                        "-=1"
                    )
                    .to(`#hero-${i + 1} h2`, 0.9, {
                        clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)"
                    })
                    .to(
                        `#hero-${i + 1} h1`,
                        0.9,
                        {
                            clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)"
                        },
                        "-=0.3"
                    )
                    .to(
                        `#hero-${i + 1} h3`,
                        0.9,
                        {
                            clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)"
                        },
                        "-=0.3"
                    );

                i++;
            }
    </script>
</body>
</html>